<template>
    <div class="div_main_frame" style="text-align:center;margin:0 auto;margin-top:0px;padding-top:0px;" align="center">
        
    <div class="fastweb_div_middle" style="width:100%;min-height:200px;text-align:center;margin-top:0px;padding-top:0px;">

        <div class="fastweb_div_middle" style="width:100%;height:auto;padding-top:0px;padding-bottom:0px;margin:0 auto;">
              <el-tabs v-model="activeName" type="border-card" tabPosition="left" @tab-click="handleClick">
                
                <el-tab-pane label="要闻" name="100" :key="'tab1'" style="margin:0;">
                    <ViewTabIndex v-if="isChildUpdate1" :json_data="tabs_data" />    
                </el-tab-pane>

                <el-tab-pane label="国际" name="200" :key="'tab2'">
                    <ViewTabIndex v-if="isChildUpdate2" :json_data="tabs_data" />   
                </el-tab-pane>

                <el-tab-pane label="企业" name="300" :key="'tab3'">
                    <ViewTabIndex v-if="isChildUpdate3" :json_data="tabs_data" /> 
                </el-tab-pane>

                <el-tab-pane label="市场" name="400" :key="'tab4'">
                    <ViewTabIndex v-if="isChildUpdate4" :json_data="tabs_data" /> 
                </el-tab-pane>

                <el-tab-pane label="社会" name="500" :key="'tab5'">
                    <ViewTabIndex v-if="isChildUpdate5" :json_data="tabs_data" /> 
                </el-tab-pane>

                <el-tab-pane label="体育" name="600" :key="'tab6'">
                    <ViewTabIndex v-if="isChildUpdate6" :json_data="tabs_data" /> 
                </el-tab-pane>

                <el-tab-pane label="科技" name="700" :key="'tab7'">
                    <ViewTabIndex v-if="isChildUpdate7" :json_data="tabs_data" /> 
                </el-tab-pane>

                <el-tab-pane label="学科" name="800" :key="'tab8'">
                    <ViewTabIndex v-if="isChildUpdate8" :json_data="tabs_data" /> 
                </el-tab-pane>

                <el-tab-pane label="定制" name="10000" :key="'tab9'">
                    <el-form  :inline="true" ref="formRef" :model="form" label-width="100px">
                          <el-form-item label="用户标识：">
                            <el-col :span="16">
                            <el-input v-model="custom.user"></el-input>
                            </el-col>
                            <el-col :span="8">
                            <el-button type="primary" @click="setUser">设置</el-button>
                            </el-col>
                          </el-form-item>

                          <el-form-item>
                            <p>&nbsp;&nbsp;网站不需要注册，请填写定制时的用户标识。</p>
                          </el-form-item>
                        </el-form>
                        <div v-if="user==''">用户标识未设置或已失效，重新设置查看定制数据。</div>
                    <ViewTabIndex v-if="isChildUpdate100" :json_data="tabs_data" /> 
                </el-tab-pane>

            </el-tabs>
        </div>

        <!--div class="div_page_top_middle" style="width:auto;height:auto;margin:0;padding:0;text-align:center">
            <ol class="fastweb_tree" style="padding:0;margin:0;">
              <li v-for="(t,index) in json_task" :key="index" class="fastweb_tree_nav">
                <label :for="'funclist_' + index">{{t.class_name}}</label>
                <input v-if="(index == 0)" type="checkbox" class="fastweb_tree_input" :id="'funclist_' + index" checked="checked"/>
                <input v-else type="checkbox" class="fastweb_tree_input" :id="'funclist_' + index"/>
                <ol>
                  <li v-for="d in t.class_detail" :key="d.task_date" class="fastweb_tree_leaf">
                    <router-link :to="{name:'result', query:{entity_name:d.entity_name,task_id:d.task_id}}"><p>实体集:{{d.entity_name}}</p><p v-if="d.custom_word">关键词:{{d.custom_word}}</p><p>日期:{{d.start_date}}~{{d.task_date}}</p></router-link>
                  </li>
                </ol>
              </li>
            </ol> 
            
        </div-->
        <div style="clear:both"></div>
    </div>
    </div>
    
    <ViewFooter/>
</template>

<script>
import { reactive,toRefs,watch,ref } from 'vue'
import { getCurrentInstance } from 'vue'
import ViewFooter from '@/components/ViewFooter.vue'
import ViewTabIndex from '@/components/ViewTabIndex.vue'
import "@/assets/global.css"
import "@/assets/fastweb.css"

const size = ref('default')
const labelPosition = ref('top')

export default 
{
    name: 'PageIndex',
    components: {
        ViewFooter,
        ViewTabIndex,
    },

    data () {
      return {
        //默认第一个选项卡
        activeName: "100",
        isChildUpdate1:true,
        isChildUpdate2:false,
        isChildUpdate3:false,
        isChildUpdate4:false,
        isChildUpdate5:false,
        isChildUpdate6:false,
        isChildUpdate7:false,
        isChildUpdate8:false,
        isChildUpdate100:false,
        tabs_data: {},
        json_task: [],
        custom: {
            user: '',
        },
        user:'',
        //tab_name: ["企业", "机构", "人物", "国际", "科学", "文化", "社会"],
        //tab_class: ["100", "101", "200", "300", "400", "500", "600"],
      };
    },
    setup(){
      const host = getCurrentInstance()?.appContext.config.globalProperties.host
      //entity_list_url = host + ""
      return {host};
        
    },
    methods: {
      queryTask:function() {
        var api_url = this.host.concat("/api/display_task_by_class?class=").concat(this.activeName);
        if (this.activeName == "10000") {
          if ((this.user === null) || (this.user == "")) {
            this.tabs_data = {};
            return;
          } else {
            api_url = this.host.concat("/api/display_task_by_user?user=").concat(this.user);
          }
          
        }
        this.axios.get(api_url)
        .then(response => {
          if((response.status == 200) && (response.data.result == 0)){
            this.tabs_data = JSON.parse(response.data.data);
          }
        })
        .catch(error => alert("系统错误，请稍后重试"));
      },
      setUser() {
          console.log('setUser!' + this.custom.user);
          this.$cookies.config("1m");
          this.$cookies.set("user", this.custom.user);
          console.log("set res:" + this.$cookies.get("user"));
          //console.log("set res:" + this.$cookiestest.get("user"));
          //getCurrentInstance()?.appContext.config.globalProperties.$cookies.config("1m");
          //getCurrentInstance()?.appContext.config.globalProperties.$cookies.set("user", this.custom.user, "1m");
          //console.log("set res:" + getCurrentInstance()?.appContext.config.globalProperties.$cookies.get("user"));
          this.user = this.custom.user;
          this.queryTask();
      },
      handleClick(tab, event) {
          this.activeName = tab.props.name;
          if(tab.props.name == "100") {
              this.isChildUpdate1 = true;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = false;
              this.isChildUpdate4 = false;
              this.isChildUpdate5 = false;
              this.isChildUpdate6 = false;
              this.isChildUpdate7 = false;
              this.isChildUpdate8 = false;
              this.isChildUpdate100 = false;
          } else if(tab.props.name == "200") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = true;
              this.isChildUpdate3 = false;
              this.isChildUpdate4 = false;
              this.isChildUpdate5 = false;
              this.isChildUpdate6 = false;
              this.isChildUpdate7 = false;
              this.isChildUpdate8 = false;
              this.isChildUpdate100 = false;
          }  else if(tab.props.name == "300") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = true;
              this.isChildUpdate4 = false;
              this.isChildUpdate5 = false;
              this.isChildUpdate6 = false;
              this.isChildUpdate7 = false;
              this.isChildUpdate8 = false;
              this.isChildUpdate100 = false;
          } else if(tab.props.name == "400") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = false;
              this.isChildUpdate4 = true;
              this.isChildUpdate5 = false;
              this.isChildUpdate6 = false;
              this.isChildUpdate7 = false;
              this.isChildUpdate8 = false;
              this.isChildUpdate100 = false;
          } else if(tab.props.name == "500") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = false;
              this.isChildUpdate4 = false;
              this.isChildUpdate5 = true;
              this.isChildUpdate6 = false;
              this.isChildUpdate7 = false;
              this.isChildUpdate8 = false;
              this.isChildUpdate100 = false;
          } else if(tab.props.name == "600") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = false;
              this.isChildUpdate4 = false;
              this.isChildUpdate5 = false;
              this.isChildUpdate6 = true;
              this.isChildUpdate7 = false;
              this.isChildUpdate8 = false;
              this.isChildUpdate100 = false;
          } else if(tab.props.name == "700") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = false;
              this.isChildUpdate4 = false;
              this.isChildUpdate5 = false;
              this.isChildUpdate6 = false;
              this.isChildUpdate7 = true;
              this.isChildUpdate8 = false;
              this.isChildUpdate100 = false;
          } else if(tab.props.name == "800") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = false;
              this.isChildUpdate4 = false;
              this.isChildUpdate5 = false;
              this.isChildUpdate6 = false;
              this.isChildUpdate7 = false;
              this.isChildUpdate8 = true;
              this.isChildUpdate100 = false;
          } else if(tab.props.name == "10000") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = false;
              this.isChildUpdate4 = false;
              this.isChildUpdate5 = false;
              this.isChildUpdate6 = false;
              this.isChildUpdate7 = false;
              this.isChildUpdate8 = false;
              this.isChildUpdate100 = true;
          }
          this.queryTask();
      }
    },
    mounted() {
      var user_temp = this.$cookies.get("user");
      console.log("user_temp" + user_temp);
      if ((user_temp === null) || (user_temp == "")) {
        this.user = "";
      } else {
        this.user = user_temp;
      }
      this.activeName = "100";
      this.isChildUpdate1 = true;
      this.isChildUpdate2 = false;
      this.isChildUpdate3 = false;
      this.isChildUpdate4 = false;
      this.isChildUpdate5 = false;
      this.isChildUpdate6 = false;
      this.isChildUpdate7 = false;
      this.isChildUpdate8 = false;
      this.isChildUpdate100 = false;
      this.queryTask();
    },
    watch:{
    },
}

var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c2ba86525ff37a3b2dd6cdadb129fdb5";
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);
</script>

<style>

.dingzhi_tile {
    text-align:left;
    padding-left:30px;
    line-height:50px;
    font-size: 24px;
    border-top:1px solid #009100;
    /*border-bottom:1px dashed #009100;*/
}

.el-tabs .el-tabs__content {
  padding:0px;
}

.el-tabs__content .el-tab-pane {
  margin:0;
}

.search_menu {
  background-color: gold;
  top:40px;
  width:100%;
  height:auto;
  border:1ps solid blue;
  position: absolute;
  text-align: left;
  z-index: 10;
}

.search_menu ul{
  margin-bottom: 0;
  list-style-type: none;
}

.search_menu li {
  padding: 5px;
  font-size: 1.1em;
  cursor: pointer;
}

.search_menu li:hover {
  background-color: beige;
}

.search:hover .search_menu {
  display: block;
}


</style>
